<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img :src="headerSrc" alt />
      </div>
      <span class="logo">
        <img :src="logoSrc" alt />
      </span>
      <span class="title">电商平台实时监控系统</span>
      <div class="title-right">
        <img :src="themeSrc" class="qiehuan" @click="handleChangeTheme" />
        <span class="datetime">2021-10-13</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <!-- -------------——----------------------- -->

        <div id="left-top" :class="[fullScreenStatus.trend?'fullscreen':'']">
          <!-- 地区销量趋势图表 -->
          <trend ref="trend"></trend>
          <div class="resize">
            <span
              @click="changeSize('trend')"
              :class="['iconfont', fullScreenStatus.trend?'icon-compress-alt':'icon-expand-alt']"
            ></span>
          </div>
        </div>

        <!-- -------------——----------------------- -->

        <div id="left-bottom" :class="[fullScreenStatus.seller?'fullscreen':'']">
          <!-- 商家销售量统计图表 -->
          <seller ref="seller"></seller>
          <div class="resize">
            <span
              @click="changeSize('seller')"
              :class="['iconfont', fullScreenStatus.seller?'icon-compress-alt':'icon-expand-alt']"
            ></span>
          </div>
        </div>
      </section>

      <section class="screen-middle">
        <!-- -------------——----------------------- -->
        <div id="middle-top" :class="[fullScreenStatus.map?'fullscreen':'']">
          <!-- 商家分布图 -->
          <Map ref="map"></Map>
          <div class="resize">
            <span
              @click="changeSize('map')"
              :class="['iconfont', fullScreenStatus.map?'icon-compress-alt':'icon-expand-alt']"
            ></span>
          </div>
        </div>
        <!-- -------------——----------------------- -->

        <div id="middle-bottom" :class="[fullScreenStatus.rank?'fullscreen':'']">
          <!-- 地区销量排行图表 -->
          <rank ref="rank"></rank>
          <div class="resize">
            <span
              @click="changeSize('rank')"
              :class="['iconfont', fullScreenStatus.rank?'icon-compress-alt':'icon-expand-alt']"
            ></span>
          </div>
        </div>
      </section>

      <section class="screen-right">
        <!-- -------------——----------------------- -->

        <div id="right-top" :class="[fullScreenStatus.hot?'fullscreen':'']">
          <!--热销商品销售金额占比统计 -->
          <hot ref="hot"></hot>
          <div class="resize">
            <span
              @click="changeSize('hot')"
              :class="['iconfont', fullScreenStatus.hot?'icon-compress-alt':'icon-expand-alt']"
            ></span>
          </div>
        </div>
        <!-- -------------——----------------------- -->

        <div id="right-bottom" :class="[fullScreenStatus.stock?'fullscreen':'']">
          <!-- 库存与销量 -->
          <stock ref="stock"></stock>
          <div class="resize">
            <span
              @click="changeSize('stock')"
              :class="['iconfont', fullScreenStatus.stock?'icon-compress-alt':'icon-expand-alt']"
            ></span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import Hot from "@/components/Hot.vue";
import Map from "@/components/Map.vue";
import Rank from "@/components/Rank.vue";
import Seller from "@/components/Seller.vue";
import Stock from "@/components/Stock.vue";
import Trend from "@/components/Trend.vue";
import { getThemeValue } from "@/utils/theme_utils.js";
import { mapState } from "vuex";

export default {
  data() {
    return {
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false
      }
    };
  },
  // created() {
  //   //   this.$socket.registerCallBack("fullScreen", this.recvData);
  //   // this.$socket.registerCallBack("themeChange", this.recvThemeChange);
  // },
  // destroyed() {
  //   // this.$socket.unRegisterCallBack("fullScreen");
  //   this.$socket.unRegisterCallBack("themeChange");
  // },
  methods: {
    changeSize(chartName) {
      this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName];
      this.$nextTick(() => {
        this.$refs[chartName].screenAdapter();
      });
    },
    // 全屏联动效果（报错）
    //   const targetValue = !this.fullScreenStatus[chartName];
    //   this.$socket.send({
    //     action: "fullScreen",
    //     socketType: "fullScreen",
    //     chartName: chartName,
    //     value: targetValue
    //   });
    // },
    // // 接收到全屏数据后的处理函数
    // recvData(data) {
    //   console.log(data);
    //   // 取出是哪一个图表需要切换
    //   const chartName = data.chartName;
    //   // 切换成什么状态
    //   const targetValue = data.value;

    //   this.fullScreenStatus[chartName] = targetValue;
    //   this.$nextTick(() => {
    //     this.$refs[chartName].screenAdapter();
    //   });
    // }
    handleChangeTheme() {
      // 切换主题
      this.$store.commit("changeTheme");
      // 切换主题联动效果（报错）
      // this.$socket.send({
      //   action: "themeChange",
      //   socketType: "themeChange",
      //   chartName: "",
      //   value: ""
      // });
    }
    // recvThemeChange() {
    //   this.$store.commit("changeTheme");
    // }
  },
  components: {
    Hot,
    Trend,
    Stock,
    Seller,
    Rank,
    Map
  },
  computed: {
    ...mapState(["theme"]),
    headerSrc() {
      return "/static/img/" + getThemeValue(this.theme).headerBorderSrc;
    },
    logoSrc() {
      return "/static/img/" + getThemeValue(this.theme).logoSrc;
    },
    themeSrc() {
      return "/static/img/" + getThemeValue(this.theme).themeSrc;
    },
    containerStyle() {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor
      };
    }
  }
};
</script>
<style scoped lang='less'>
// 全屏样式
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
    img {
      width: 100%;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 1.25rem;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 20px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
    img {
      height: 35px;
      width: 128px;
    }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  margin-top: 0.94rem;
  display: flex;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 53%;
      position: relative;
    }
    #left-bottom {
      height: 31%;
      margin-top: 25px;
      position: relative;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 56%;
      position: relative;
    }
    #middle-bottom {
      margin-top: 25px;
      width: 100%;
      height: 28%;
      position: relative;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 46%;
      position: relative;
    }
    #right-bottom {
      height: 38%;
      margin-top: 25px;
      position: relative;
    }
  }
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>